<template>
  <div class="h-full bg-white w-full">
    <Card class="!h-full" :body-style="{ height: '100%' }" :title="cardTitle" :bordered="false">
      <div ref="chartRef" class="w-full h-full"></div>
    </Card>
  </div>
</template>

<script lang="ts" setup>
  import { ref, Ref, watch } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { Card } from 'ant-design-vue';

  const props = defineProps({
    widgetData: {
      type: Object,
    },
    isResize: {
      type: Boolean,
    },
    dashboard: {
      type: Boolean,
    },
  });

  const chartRef = ref<HTMLDivElement | null>(null);
  const cardTitle = ref<string>('');

  const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);

  watch(
    () => props.widgetData,
    (nVal: Recordable) => {
      if (!nVal) return;
      if (Object.keys(nVal).length === 0) return;
      const { options, title } = nVal;
      cardTitle.value = title;
      setOptions(options);
    },
    {
      immediate: true,
      deep: true,
    },
  );
  watch(
    () => props.isResize,
    () => {
      getInstance()?.resize({ animation: { duration: 0 } });
    },
    {
      immediate: true,
    },
  );
</script>

<style lang="less" scoped>
  :deep(.ant-card-head) {
    min-height: 0;
  }
</style>
